<template>
    <div class="the-date-picker">
        <el-date-picker
            type="date"
            :placeholder="placeholderDate"
            format="yyyy/MM/dd"
            prefix-icon="false"
            v-model="startDate"
            :clearable="true"
            class="custom-the-datepicker startDate"
            @change="onChangeDate($event, 'startDate')"
            @keyup.enter.native="onKeyupEnter"
            :style="styleDate"
        ></el-date-picker>
        <el-time-select
            :style="styleTime"
            prefix-icon="false"
            :placeholder="placeholderTime"
            v-model="startTime"
            class="custom-the-datepicker startTime"
            :clearable="false"
            :picker-options="pickerOptionsTime"
            @change="onChangeDate($event, 'startTime')"
            @keyup.enter.native="onKeyupEnter"
        >
        </el-time-select>
    </div>
</template>
<script>
import moment from 'moment';
export default {
    name: 'the-date-picker',
    props: {
        pickerOptionsTime: {
            type: Object,
            default: () => ({
                start: '00:00',
                step: '00:30',
                end: '24:00'
            })
        },
        placeholderDate: {type: String, default: '选择日期'},
        placeholderTime: {type: String, default: '选择时间'},
        styleDate: {type: Object, default: () => ({'min-width': '88px', 'margin-right': '5px'})},
        styleTime: {type: Object, default: () => ({'min-width': '60px'})},
        value: {
            type: [Date, String, Number],
            required: false
        }
    },
    data() {
        return {
            startDate: '',
            startTime: ''
        };
    },
    watch: {
        value: {
            handler(val) {
                if (val) {
                    const startDate = moment(new Date(val)).format('YYYY/MM/DD');
                    const startTime = moment(new Date(val)).format('HH:mm');
                    // console.log('startDate :>> ', startDate);
                    // console.log('startTime :>> ', startTime);
                    this.startDate = startDate;
                    this.startTime = startTime;
                } else {
                    this.startDate = '';
                    this.startTime = '';
                }
            },
            immediate: true
        }
    },
    methods: {
        onChangeDate(value, type) {
            if (type === 'startDate' && !value) {
                this.startTime = '';
            }
            if (type === 'startDate' && value && !this.startTime) {
                this.startTime = '00:00';
            }

            // eslint-disable-next-line
            const date = this.startDate
                ? `${moment(new Date(this.startDate)).format('YYYY/MM/DD')} ${this.startTime}` // eslint-disable-line
                : ''; // eslint-disable-line

            this.$emit('input', date);
            this.$emit('change', date);
        },
        onKeyupEnter(...reset) {
            this.$emit('keyup', ...reset);
        }
    }
};
</script>
<style lang="scss" scoped>
.the-date-picker {
    display: flex;
    ::v-deep {
        .startDate {
            flex: 3;
        }
        .startTime {
            flex: 2;
        }
    }
}
</style>
